<template>
    <div>
        <section class="header text-center">
            <nav class="navbar navbar-expand-lg navbar-light navbar-custom">
                <div class="container"><a class="navbar-brand" href="/"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{ $t('m.name') }}</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
                        <ul class="navbar-nav mt-2 mt-md-0">
                            <li class="nav-item active"><a class="nav-link" href="#">{{ $t('m.home') }} <span class="sr-only">(current)</span></a></li>
                            <li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ $t('m.shop') }} </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <div class="container">
                                        <div class="divider"></div>
                                        <div class="row">
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">{{ $t('m.women') }}</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link active" href="#">{{ $t('m.active') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">{{ $t('m.men') }}</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">{{ $t('m.girl') }}</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-2">
                                                <h6 class="text-uppercase">{{ $t('m.boy') }}</h6>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                    <li class="nav-item"><a class="nav-link" href="#">{{ $t('m.link_item') }}</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-md-4">
                                                <h6 class="text-uppercase">{{ $t('m.featured_items') }}</h6>
                                                <div class="row">
                                                    <div class="col-6 text-center"><a href="item.html">
                                                        <img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
                                                        <h6 class="mb-0"><a href="item.html">{{ $t('m.product_name') }}</a></h6>
                                                        <p><span class="emphasis">$49.00</span></p>
                                                        <a href="#" class="btn btn-sm btn-outline-secondary mt-0">{{ $t('m.buy_now') }}</a>
                                            </div>
                                                    <div class="col-6 text-center"><a href="item.html">
                                                        <img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
                                                        <h6 class="mb-0"><a href="item.html">{{ $t('m.product_name') }}</a></h6>
                                                        <p><span class="emphasis">$49.00</span></p>
                                                        <a href="#" class="btn btn-sm btn-outline-secondary mt-0">{{ $t('m.buy_now') }}</a>
                                            </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ $t('m.pages') }} </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">{{ $t('m.homepage') }}</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="catalog.html">{{ $t('m.catalog') }}</a>
                                    <a class="dropdown-item" href="item.html">{{ $t('m.item_detail') }}</a>
                                    <a class="dropdown-item" href="cart.html">{{ $t('m.cart') }}</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="contact.html">{{ $t('m.contact') }}</a>
        
                                </div>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="contact.html">{{ $t('m.contact') }}</a></li>
                        <li class="nav-item dropdown"><!-- <input type="text" /></li> -->

                        <!-- 检索功能 -->
                            <Search v-model="text" @search="search"></Search>

                            <!-- 集成智能搜索功能 -->
                            <div v-width="210"><AutoComplete :option="param" v-model="text" @change="onChange" type="title"></AutoComplete>
                            </div>

                            <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" target="_blank" href="/cart" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">{{ totalcount() }}</span></a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
                                    <!-- <h6>{{ $t('m.3_items') }} <span class="emphasis">$147.00</span></h6> -->
                                    <h6>{{ totalcount() }}件商品 <span class="emphasis">${{ totalprice() }}</span></h6>
                                    <div class="dropdown-divider"></div>
                                    <ul class="shopping-cart-items">
                                        <li class="row" v-for="(cart, index) in cartlist" :key="index">
                                            <div class="col-3">
                                                <img :src="'http://localhost:8000/static/upload/' + cart.img"  width="60">
                                            </div>
                                            <div class="col-9">
                                                <h6><a href="item.html">{{ cart.name }}</a></h6>
                                                <span class="text-muted">{{ cart.num }}x</span>
                                                <span class="emphasis">${{ cart.price }}</span></div>
                                        </li>
                                    </ul>
                                    
                                    <a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">{{ $t('m.view_cart') }}</a></div>
                            </li>
                        </ul>

                        &nbsp;&nbsp;
                        
                        <!-- <div>
                            <Button @click='changelocale_cn'>中文</Button>
                            <br>
                            <Button @click='changelocale_en'>English</Button>
                        </div> -->

                        <div v-if="username == ''">
                            <Button>
                                <!-- <a href="/login">登录</a> -->
                                <router-link to="/login">登录</router-link>
                            </Button>
                            <br>
                            <Button>
                                <!-- <a href="/register">注册</a> -->
                                <router-link  to="/register">注册</router-link>
                            </Button>
                        </div>
                        <div v-else>
                            欢迎您 : <router-link to="/myprofile">{{ username }}</router-link>
                            <br>
                            <Button @click="logout">
                                登出
                            </Button>
                        </div>

                        &nbsp;&nbsp;&nbsp;&nbsp;
                        
                        <div>
                        <br>
                        <Button v-if="the_admin == true"><a href="/insertgoods">添加商品</a></Button>
                        </div>  
                        
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        
                        <!-- 单向选择开关 -->
                        <!-- 完成中英文切换功能 -->
                        <!-- 国际化语言开关 -->
                        <h-switch v-model="lang" @change='lang_change'>
                            中/EN
                        </h-switch>

                        &nbsp;&nbsp;

                       
                        
                    </div>
                </div>
            </nav>
        </section>

    </div>

</template>

<script>
import {config,formatXml} from '../config.js'

import jsonp from 'fetch-jsonp';
const loadData = function (filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
    .then(response => response.json())
    .then((d) => {
      callback(d.result.map((r) => {
        return r[0];
      }));
    });
};

    export default {
      data () {
        return {
          msg: "这是一个变量",
          username:'',
          uid:'',

          //语言变量
          lang:false,

          //验证用户身份
          u_type:'',
          the_admin:'',

          //检索变量
            text:'',

          //智能提示控件
	      value: '',
          param: {
              orgId: 1, // 自定义参数传递
              loadData,
              minWord: 1
          },

          //购物车商品变量
          cartlist:[],

        }
      },

      //定义接收参数
    //   props:['totalcount','totalprice'],
      mounted:function(){

        //接收微博登录参数
        var sina_id = this.$route.query.sina_id;

        var uid = this.$route.query.uid

        // console.log(this.$route.query.sina_id)

        if (sina_id){

            localStorage.setItem('username',sina_id);

            //微博登录获取新浪用户ID时提取的uid
            // localStorage.setItem('uid',this.$route.query.sina_uid);
            
            //微博登录获取新浪用户名时提取的uid
            localStorage.setItem('uid',this.$route.query.uid);


        }

        //接收钉钉登陆参数
        var ding_name = this.$route.query.ding_name;

        var ding_id = this.$route.query.ding_id;

        console.log(this.$route.query.ding_name);

        if(ding_name){
            localStorage.setItem('username',ding_name);

            localStorage.setItem('uid',ding_id);


        }


        //判断用户是否登录
        let uname = localStorage.getItem('username')
        
        //说明未登录或已登出
        if(uname==null){
            this.username = '';

        }else{
            this.username = uname,

            this.uid = localStorage.getItem('uid')

        }

        //自动判断语言
        console.log(navigator.language);
        if(navigator.language == "zh-CN"){
            this.$i18n.locale = 'zh';

        }else{
            this.$i18n.locale = 'en';

        }

        // //判断语言选择并赋值
        // this.$i18n.locale = localStorage.getItem('lang')
        // if(this.$i18n.locale == 'cn'){
        //     this.lang = false;
        // }else{
        //     this.lang = true;
        // }

        //验证管理员身份
        this.admin()

        //获取购物车信息
        this.get_cartlist()
       
      
    },
      methods:{
        //登出功能
        logout:function(){
            //删除对应的localstorage
            localStorage.removeItem('username');
            localStorage.removeItem('uid');
            localStorage.removeItem('jwt');
            // localStorage.clear()     //可以全部删除

            // localStorage.removeItem('uid')

            //跳转
            this.username = '';
            this.$router.push('/login');


        },

        // //中英文切换功能
        // changelocale_en:function(){
        //     this.$i18n.locale = 'en'


        // },
        // changelocale_cn:function(){
        //     this.$i18n.locale = 'cn'
        // },

        lang_change:function(){
            console.log(this.lang);

            //判断语言
            if(this.lang == true){
                //英文
                this.$i18n.locale = 'en';
                //保存语言信息
                localStorage.setItem('lang','en');

            }else{
                //单选
                this.$i18n.locale = 'zh';
                //保存语言信息
                localStorage.setItem('lang','zh');

            }
        },


        //检索逻辑
        search:function(){
            // console.log(this.text);

            //跳转
            this.$router.push({'path':'/search',query:{'word':this.text}});

        },

        //管理员身份判定
	    admin:function(){
            this.axios.get(config['after_end'] + '/getusertype/',{params:{uid:localStorage.getItem('uid')}})
		    .then((result)=>{
			    // console.log(result);
                this.u_type = result.data.u_type;
                
                // this.$Message(this.u_type);

                if(this.u_type == 1){
                    this.the_admin = true;
                }else{
                    this.the_admin = false;
                }

		    })

	    },


        //定义 on change
	  		//关键词变更
	    onChange(data, trigger) {
      	    console.log(data, trigger);
            //   this.search();

        },

        //购物车列表获取
        get_cartlist:function(){
            this.cartlist = JSON.parse(localStorage.getItem("cart"));
            // console.log(this.cartlist);

        },


        //
    //计算购物车内商品总数
	totalcount:function(){
		var total = 0;
		for(var i=0,l=this.cartlist.length;i<l;i++){
			//获得总数量
			total += this.cartlist[i].num;
			
		}

		//返回总数量
		return total;

	},

	//计算商品总价格
	totalprice:function(){
		var total = 0;
		for(var i=0,l=this.cartlist.length;i<l;i++){
			//获得总数量
			total += (this.cartlist[i].num * this.cartlist[i].price);
			
		}

		//返回总数量
		return total;

	},

         
      },

    }
    
    
    </script>
     
    <style>
    
    
    
    </style>